<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <div id="ddd" contenteditable="true">11<span>hello</span>22</div>
</body>
<script>
  let element = document.querySelector('#ddd');
  console.log(element.children)
  console.log(element.childNodes)

  function setPointIndex(element,index, pointIndex) {
    // 设置光标位置
    let selection = document.getSelection()
    let range = document.createRange();
    console.log(element.childNodes[index].length)
    range.setStart(element.childNodes[index] , pointIndex)
    range.collapse(true)
    selection.removeAllRanges()
    selection.addRange(range)
    element.focus()
  }

  setPointIndex(element,2,element.childNodes[2].length)


  setInterval(() => {
      let selection = document.getSelection()
      console.log(selection)
      console.log(selection.focusNode)
      console.dir(document.querySelector('#ddd span'))
      console.log(selection.focusNode == document.querySelector('#ddd span').firstChild)
  },1000)
</script>
</html>